import { memo, useEffect } from 'react'
import { Form, Input } from 'antd'
import { QuestionTextareaPropsType } from '../interface'

const { TextArea } = Input

const PropComponent = memo((props: QuestionTextareaPropsType) => {
  const { title, placeholder, disabled, onChange } = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({
      title,
      placeholder,
    })
  }, [title, placeholder])

  const handleFormChange = () => {
    onChange && onChange(form.getFieldsValue())
  }

  return (
    <Form
      onValuesChange={handleFormChange}
      layout="vertical"
      initialValues={{ title, placeholder }}
      form={form}
      disabled={disabled}
    >
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="内容" name="placeholder">
        <TextArea />
      </Form.Item>
    </Form>
  )
})

export default PropComponent
